<template>
  <el-dialog
    :title="'选择终端组'"
    :visible.sync="selectMediaDialog"
    :width="this.$store.getters.offsetWidth?this.$store.getters.offsetWidth:'800px'"
    v-dialogDrag
    :close-on-click-modal="false"
    @close="closeData"
    :append-to-body="appendToBody"
  >
    <div class="dialog-body">
      <div class="line">
        <div class="box">
          <div class="tltle_box_l">
            <el-row :gutter="24" style="width: 100%">
              <el-col :sm="24" :md="14" :lg="14" style="display: flex; margin-bottom: 10px">
                <div class="Material_r">
                  <el-input placeholder="请输入终端组名称关键字" v-model="sosoInput" @clear="searchPage" clearable></el-input>
                </div>
                <el-button
                  class="Material_r_b"
                  type="primary"
                  icon="el-icon-search"
                  @click="searchPage"
                >搜索</el-button>
              </el-col>
              <el-col :sm="24" :md="10" :lg="10">
                <div>
                  <el-button-group>

                  </el-button-group>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div>
          <zycm-table
            @zyLoadData="loadData"
            zy-table-ref="dialog_media_group_table"
            :zy-table-data="tabledataList"
            zy-table-height="50vh"
            zy-table-select-type="checkbox"
            @zyTableSelect="tableSelect"
            zy-row-key="mediaGroupId"
          >
            <el-table-column label="终端组名称" prop="mediaGroupName"></el-table-column>
          </zycm-table>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveBtn">确 定</el-button>
        <el-button @click="closeData">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      selectMediaDialog: false,
      tabledataList: [],
      tablePageList: [],
      selectTableList: [],
      sosoInput:"",
      searchForm: new FormData(),
      dialogType:""
    };
  },
  props:{
   appendToBody:{
     type:Boolean,
     default:false
   }
  },
  methods: {
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "dialog_media_group_table") {
        //发布-选择节目列表
        let url = "";
        if(this.dialogType == 1){//只查询末节点终端组数据 并且排除了已加入同步组的数据
          url = "mediaGroup/selectPageLastGroup";
        }
        res = await this.$http.post(
          url,
          this.tablePageList[tableRef]
        );
        res.data.dataList.forEach(ele => {
          if (!ele.playProgramNum) {
            ele.playProgramNum = 0;
          } else if (ele.programNum) {
            ele.programNum = 0;
          }
          this.selectTableList = [];
        });
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常"
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", 10);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    tableSelect(selection, row, tableRef) {
      if (tableRef === "dialog_media_group_table") {
        //发布-选择节目
        this.selectTableList = selection;
      }
    },
    //分页查询
    async searchPage() {
      this.searchForm.set("mediaGroupName", this.sosoInput);
      this.currentTableLoad("dialog_media_group_table", true, this.searchForm);
    },
    //初始化弹窗
    openWin(type,param){//type用来标识区别于通用弹窗展示数据的，param用来传输根据不同弹窗处理不同传值类型数据
        this.dialogType = type;//1表示展示添加同步组的弹窗
        this.searchPage();
        this.selectMediaDialog = true;
    },
    //关闭弹窗
    closeData(){
        this.selectTableList=[];
        this.sosoInput="";
        this.selectMediaDialog = false;
    },
    //确定
    saveBtn(){
        //获取已选数据
        this.$emit("getSelectData",this.selectTableList);
        this.closeData();
    }
  }
};
</script>
<style lang="stylus" scoped>
    /deep/.el-dialog__header {
        background-color: #efefef;
        padding: 0;
        line-height: 50px;
        padding-left: 20px;
        color: #333;
        font-size: 16px;
    }
    /deep/.el-table th, .el-table tr {
        background-color: #fafafa;
    }
    /deep/.el-pagination__sizes input{
        height: 22px;
        line-height: 22px;
    }
    /deep/.el-dialog__footer{
        text-align: center;
    }
    /deep/.el-dialog__body {
        padding: 10px 20px 0px 20px;
    }
    /deep/.Material_r{
        margin-right :20px;
    }
</style>
